<template>
    <el-container>
        <el-aside width="200px">
            <h5 class="logo">Manager</h5>
            <el-menu
                    background-color="#545C64"
                    :default-active="activeMenu"
                    class="el-menu-vertical-demo"
                    @select="handleSelect"
                    text-color="#fff"
                    active-text-color="#A0E7FC"
                    router
            >
                <el-menu-item index="/welcome">
                    <el-icon><HomeFilled /></el-icon>
                    <span>首页</span>
                </el-menu-item>
                <tree-menu :menu="menuList"></tree-menu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header height="60px">
                <div class="bread">
                    <div>
                        <el-icon :size="20">
                            <Fold/>
                        </el-icon>
                    </div>
                    <div>
                        <Breadcrub />
                    </div>
                </div>
                <div class="user-info">
                    <span class="bell-icon">
                        <el-badge is-dot class="item" v-show="count > 0">
                        </el-badge>
                         <el-icon :size="20"><Bell/></el-icon>
                    </span>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                          {{userInfo.userName}}
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>邮箱：{{userInfo.userEmail}}</el-dropdown-item>
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <span>

                    </span>
                </div>
            </el-header>
            <el-main>
                <div class="main-wrap">
                    <router-view></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import TreeMenu from './TreeMenu.vue'
    import Breadcrub from './Breadcrumb.vue'
    export default {
        name: "Home",
        components: {
            TreeMenu,
            Breadcrub
        },
        data() {
          return {
              userInfo: this.$store.state.userInfo || {
                  name: '',
                  email: ''
              },
              count: 0,
              menuList: [],
              activeMenu: location.hash.slice(1)
          }
        },
        created() {
            this.getCount()
            this.getUserPermission()
        },
        methods: {
            logout() {
                this.$store.commit('setUserInfo', {})
                this.$router.push('/login')
            },
            async getCount() {
                const res = await this.$api.getPendingCount(false)
                this.count = res
            },
            // async getMenu() {
            //     const res = await this.$api.getMenuList()
            //     this.menuList = res
            //     // console.log(res)
            // },
            async getUserPermission() {
                const res = await this.$api.getPermission()
                this.menuList = res.menuList
                this.$store.commit('setMenu', res.menuList)
                this.$store.commit('setAction', res.actionList)
                // getPermission
            },
            handleSelect (key, keyPath) {
                console.log(key)
                console.log(keyPath)
            }
        }
    }
</script>

<style lang="scss">
    .el-aside {
        background: #545C64;
        color: #fff;
    }

    .el-header {
        background: #fff;
        padding: 0 20px;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .el-main {
        background: #EDECF0;
        padding: 20px;

        .main-wrap {
            /*background: #ffffff;*/
            height: 100%;
        }
    }

    .el-icon {
        vertical-align: middle;
        margin: 0 12px;
        position: relative;
    }

    .bell-icon {
        position: relative;
    }

    .bell-icon .el-icon {
        position: absolute;
        left: -44px;
        top: 1px;
    }

    .bell-icon .el-badge {
        position: absolute;
        left: -16px;
        top: -32px;
    }

    .logo {
        height: 50px;
        margin: 12px 0;
        line-height: 50px;
        box-sizing: border-box;
        padding-left: 90px;
        font-weight: bold;
        font-size: 18px;
        background: url("../assets/logo.png") no-repeat 20px;
        background-size: contain;
    }

    .el-menu {
        border-right: none;
    }
    .el-dropdown{
        position: relative;
        top: 23px;
        font-size: 16px;
        color: #000;
    }
    .bread{
        display: flex;
        align-items: center;
    }
</style>
